import React from "react";
import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";

export default () => {

    const data = [
        {
            date: "2020-01-01",
            number: 2,
            type: "商品浏览",
        },
        {
            date: "2020-01-02",
            number: 10,
            type: "商品浏览",
        },
        {
            date: "2020-01-03",
            number: 50,
            type: "商品浏览",
        },
        {
            date: "2020-01-04",
            number: 17,
            type: "商品浏览",
        },
        {
            date: "2020-01-05",
            number: 9,
            type: "商品浏览",
        },
        {
            date: "2020-01-06",
            number: 16,
            type: "商品浏览",
        },
        {
            date: "2020-01-07",
            number: 27,
            type: "商品浏览",
        },


        {
            date: "2020-01-01",
            number: 15,
            type: "商品收藏",
        },
        {
            date: "2020-01-02",
            number: 24,
            type: "商品收藏",
        },
        {
            date: "2020-01-03",
            number: 35,
            type: "商品收藏",
        },
        {
            date: "2020-01-04",
            number: 15,
            type: "商品收藏",
        },
        {
            date: "2020-01-05",
            number: 29,
            type: "商品收藏",
        },
        {
            date: "2020-01-06",
            number: 6,
            type: "商品收藏",
        },
        {
            date: "2020-01-07",
            number: 37,
            type: "商品收藏",
        }
    ];
    const scale = {
        number: {
            alias: '个'
        },
        date: {
            alias: '日期',
        }
    };
    return (

        <Chart padding={"auto"} height={400} data={data} scale={scale} forceFit>
            <Legend />
            <Axis
                name="date"
            />
            <Axis name="number"
                label={{
                    formatter: val => `${val}个`
                }}
            />
            <Tooltip
                crosshairs={{
                    type: 'y',
                }}
            />
            <Geom
                type="line"
                position="date*number"
                size={2}
                color={'type'}
            />
            <Geom
                type="point"
                position="date*number"
                size={4}
                shape={"circle"}
                color={'type'}
            />
        </Chart>

    );

}